﻿<%@ Page Language="C#" MasterPageFile="~/YUIAspNet.Master" AutoEventWireup="true" CodeBehind="ConditionalShow.aspx.cs" Inherits="YUIAspNetDemo.Tooltip.ConditionalShow" Title="Untitled Page" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <title>YUIAsp.Net Controls : LiveDemo : Tooltip : Usage info</title>
    <script type="text/javascript">
        function ConfigShow(){
            var myTb = $get('<%=tb1.ClientID %>');
            var myTooltip = $get('<%=ttip.ClientID %>');
        
            $addHandler(myTb, "focus", function() { 
                    var tt = $find('<%=ttip.ClientID %>');
                    var bounds = Sys.UI.DomElement.getBounds(myTb);
                    tt.get_YUIControl().pageX = bounds.x;
                    tt.get_YUIControl().pageY = bounds.y;
                    tt.show(myTb); 
                });
            $addHandler(myTb, "blur", function() { $find('<%=ttip.ClientID %>').hide(); });
        };
    </script>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <h1>Tooltip usage info</h1>
    
    <p>The YUIAsp.Net Tooltip's appearance can be controled using the show and hide methods.</p>
    
    <p>In this example, the tooltip is shown when the textbox below is focused, and it's hidden when the textbox loses the focus.</p>

    <asp:TextBox ID="tb1" runat="server"></asp:TextBox>
    
    <yui:Tooltip ID="ttip" runat="server" Width="200px" PreventOverlap="false" OnClientAfterInitialization="ConfigShow"> 
        <Effect Effect="Fade" Duration="0.4" />
        <ContentTemplate>Please enter whatever you like in here.</ContentTemplate>
    </yui:Tooltip>
    
    
    <p>The same tooltip can be attached to multiple elements.</p>
</asp:Content>
